import React from 'react';
import {
	WeaDialog,
	WeaBrowser,
	WeaTable,
	WeaTab,
	WeaFormItem,
	WeaSearchGroup,
	WeaInput,
	WeaPopoverHrm,
	WeaSelect, WeaLocaleProvider
} from 'ecCom';
import { Button } from 'antd';
import { toJS } from 'mobx';
import { observer, inject } from 'mobx-react';
import Loading from '../form/dialog/addShare/Loading';
import classNames from 'classnames';
import './index.less';
const getLabel = WeaLocaleProvider.getLabel;


const options = () => {
	return [{
		key: '0',
		showname: ""
	},
		{
			key: '1',
			showname: getLabel(523516,'已填写')
		},
		{
			key: '2',
			showname: getLabel(523517,'未填写')
		}
	]
}

@inject('edcDataDesignerStore')
@observer
export default class SelectRemindPerson extends React.Component {
	constructor(props) {
		super(props);

		this.state = {
			showSearchAd: false,
			remindPerson: [],
			name: '',
			deptId: '',
			status: '0',
			deptData: []
		};
	}

 	componentWillMount() {
        const { edcDataDesignerStore: store } = this.props;
		this.store = store;
		const { remindPerson } = this.store;

		this.setState({ remindPerson });
	}

	componentWillReceiveProps(nextProps) {
		const { remindPerson } = this.store;

		if (nextProps.visible !== this.props.visible) {
			this.setState({ remindPerson });
		}
	}
	
	getData = () => {
		let { filterAllPerson } = this.store;
		const data = [];

		filterAllPerson && toJS(filterAllPerson).forEach(person => {
			data.push({
				key: person.id,
				id: person.id,
				user: person.lastname,
				submitted: person.submitted,
				department: person.departmentName
			});
		});
		
		return data;
	}

	columns = () => {
		return [{
			title: getLabel(527041,'人员'),
			dataIndex: 'user',
			key: 'user',
			render: (text, record) => {
				return (
					<a href={`javaScript:openhrm(${record.id})`} onClick={e => window.pointerXY(e)} >{text}</a>
				)
			}
		}, {
			title: getLabel(527043,'部门'),
			dataIndex: 'department',
			key: 'department'
		}, {
			title: getLabel(523519,'填写状态'),
			dataIndex: 'submitted',
			key: 'submitted',
			render: (text, record) => {
				const status = text ? getLabel(523516,'已填写') : getLabel(523517,'未填写');

				return (
					<span className={classNames({ 'no-submit': !text })}>{status}</span>
				)
			}
		}]
	};
	
	getSearchs = () => {
		let group = [];
		const items = [
			{
				com: (
				<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@fh1hia@$people`} label={getLabel(527041,'人员')} labelCol={{span: 6}} wrapperCol={{span: 18}}>
					<WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@ltcuo7@$people`}
						onChange={value => this.setState({ name:value })}
						value={this.state.name}
					/>
				</WeaFormItem>
				),
				colSpan: 2
			},
			{
				com: (
					<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@5122qu@$department`} label={getLabel(527043,'部门')} labelCol={{span: 6}} wrapperCol={{span: 18}}>
						<WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@mpqdu6@$department`}
						type={4}
						title={getLabel(523714,'选择部门')}
						icon={"icon-coms02-Data-center"}
						iconBgcolor = "#1a57a0"
						textDecoration={true}
						tabs= {[
						{
							"key": "2",
							"name": getLabel(526988,'组织结构'),
							"dataURL": null,
							"dataParams": null,
							"isSearch": false,
							"showOrder": 0,
							"selected": false
						}, {
							"key": "1",
							"name": getLabel(526987,'按列表'),
							"dataURL": null,
							"dataParams": {
							"list": "1"
							},
							"isSearch": true,
							"showOrder": 0,
							"selected": false
						}]}
                    replaceDatas={this.state.deptData}
                    onChange={(id, name, data) => this.setState({ deptId: id, deptData: data })}
                    isSingle={true}
                  />
				</WeaFormItem>
				),
				colSpan: 2
			},
			{
				com: (
					<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@3etk0x@$status`} label={getLabel(523519,'填写状态')} labelCol={{span: 6}} wrapperCol={{span: 18}}>
						<WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@s84t86@$status`}
						options={options()}
						onChange={(key) => {
							this.setState({ status: key })
						}}
						value={this.state.status}
					/>
				</WeaFormItem>
				),
				colSpan: 2
			},
		];

		group.push(
			<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@eqf5wh@$condition`}
				col={2}
				title={getLabel(505990,'常用条件')}
				needTigger={false}
				showGroup={true}
				defaultShow={true}
				items={items}
			/>
		);
		return group;
	}

	selectRemindPerson = ids => {
		this.setState({ remindPerson: ids });
	}

	rowSelection = () => {
		const { remindPerson } = this.state;

		return {
			onChange: (selectedRowKeysAllPages, selectedRows) => {
				this.selectRemindPerson(selectedRowKeysAllPages);
			},
			selectedRowKeysAllPages: remindPerson
		}
	};

	selectAllUnsubmit = () => {
		const {
			unSubmitPerson,
			selectRemindPerson
		} = this.store;

		this.setState({ remindPerson: toJS(unSubmitPerson) });
		selectRemindPerson(unSubmitPerson, 'UNSUBMIT');
		this.onCancel();
	}

	selectAll = () => {
		const {
			allPersonIds,
			selectRemindPerson
		} = this.store;

		this.setState({ remindPerson: toJS(allPersonIds)});
		selectRemindPerson(allPersonIds, 'ALL');
		this.onCancel();
	}

	onCancel = () => {
		const {
			hideSelectRemindPerson: onCancel,
			remindPerson,
			allPerson,
			onFilerAllPersonChange
		} = this.store;

		this.setState({ 
			remindPerson: toJS(remindPerson), 
			name: '', 
			deptId: '', 
			deptData: [],
			status: '0'
		});

		onFilerAllPersonChange(allPerson);
		onCancel();
	}

	onSearch = value => {
		const { filterRemindPerson } = this.store;

		this.setState({ name: value });
		filterRemindPerson(value);
	}

	onAdSearch = () => {
		const { name, deptId, status } = this.state;
		const { filterRemindPerson } = this.store;

		filterRemindPerson(name, deptId, status);
	}

	reset = () => {
		this.setState({ name: '', deptId: '', status: '0', deptData: [] });
	}

	getBtns = () => {
		const { 
			selectRemindPerson
		 } = this.store;
		const { remindPerson } = this.state;
		
		return (
			[
				<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@r38s64@$onOk`} type="primary" onClick={() => {
					selectRemindPerson(remindPerson);
					this.onCancel();
				}}>{getLabel(527018,'确认')}</Button>,
				<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@gxvr5m@$cancel`} type="ghost" onClick={() => {
					this.onCancel();
				}}>{getLabel(523250,'取消')}</Button>
			]
		)
	} 

	bottomLeft = (
		<div>
			<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@d3kyeh`} type="primary" onClick={this.selectAllUnsubmit} >{getLabel(523521,'选择未填写人员')}</Button>
			<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ro28uk`} type='primary' onClick={this.selectAll}>{getLabel(527161,'选择全部人员')}</Button>
		</div>
	)
	
	render () {
		const {
			remindPersonLoading: loading
		} = this.store;
		const { visible } = this.props;
		const { name } = this.state;

		return (
		<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@qzsm0o`}
			title={getLabel(527162,'选择接收人')}
			className='wea-edc-select-remind-person'
			icon={"icon-coms02-Data-center"}
			iconBgcolor = "#1a57a0"
			hasScroll
			confirmLoading={true}
			visible={visible}
			buttons={this.getBtns()}
			onCancel={this.onCancel}
			style={{ width: 850, height: 520 }}
			bottomLeft={this.bottomLeft}
			destroyBodyOnClose={true}
		>
			<div className='content'>
				<div className='top'>
					<WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@z5mae0`}
						autoCalculateWidth={true}
						searchType={["base", "advanced"]}
						advanceHeight={200}
						searchsAd={this.getSearchs()}
						showSearchAd={this.state.showSearchAd}
						setShowSearchAd={bool => {
							this.setState({
								showSearchAd: bool
							});
						}}
						searchsBaseValue={name}
						onSearch={ this.onSearch }
						onAdSearch={ this.onAdSearch }
						onAdReset={ this.reset }
					/>
				</div>
				<WeaPopoverHrm ecId={`${this && this.props && this.props.ecId || ''}_WeaPopoverHrm@gdrt1v`} />
				{
					loading ?
					<Loading ecId={`${this && this.props && this.props.ecId || ''}_Loading@p1nzfy`} loading={true} content={getLabel(527046,'加载中...')} /> :
					<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@pi5vt5`} 
						columns={this.columns()}
						dataSource={this.getData()}
						scroll={{ y: 370 }}
						rowSelection={this.rowSelection()}
						pagination={{
							showSizeChanger: true,
							pageSizeOptions: ['10', '20', '50', '100'],
    						showTotal: total => `${getLabel(527163,'共')} ${total} ${getLabel(527164,'条')}`
						}}
					/>
				}
			</div>
		</WeaDialog>
		)
	}
}